<template>
  <div>
    <el-form ref="form" :model="form" label-width="160px">
      <el-form-item label="主题">
        {{ form.title }}
      </el-form-item>
      <el-form-item label="菜单">
        {{ form.menuName || '-' }}
      </el-form-item>
      <el-form-item label="排序">
        {{ form.sort }}
      </el-form-item>
      <el-form-item label="WAP端封面">
        <el-image
          v-if="form.wapImgUrl"
          style="width: 200px; height: 200px"
          :src="baseUrl + form.wapImgUrl"
          fit="contain"
        >
          <div slot="error" class="image-slot" style="width: 200px; height: 200px; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #999;">
            暂无图片
          </div>
        </el-image>
        <span v-else style="color: #999;">暂无图片</span>
      </el-form-item>
      <el-form-item label="PC端封面">
        <el-image
          v-if="form.pcImgUrl"
          style="width: 200px; height: 200px"
          :src="baseUrl + form.pcImgUrl"
          fit="contain"
        >
          <div slot="error" class="image-slot" style="width: 200px; height: 200px; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #999;">
            暂无图片
          </div>
        </el-image>
        <span v-else style="color: #999;">暂无图片</span>
      </el-form-item>
      <el-form-item label="视频上传">
        <div class="detail-file-upload">
          <FileUpload
            :limit="1"
            v-model="form.fileUrl"
            :src="baseUrl + form.fileUrl"
            :fileType="['mp4', 'avi', 'mov', 'wmv', 'flv', 'mkv', 'webm']"
            :isShowTip="false"
          />
        </div>
      </el-form-item>
      <el-form-item label="内容介绍">
        <div
          v-html="form.contentIntroduce"
          style="border: 1px solid #c0c4cc; padding: 5px 15px; min-height: 100px"
        ></div>
      </el-form-item>
    </el-form>
    
    <div style="display: flex; justify-content: center; margin-top: 20px">
      <el-button @click="onCancel">关闭</el-button>
    </div>
  </div>
</template>
<script>
import { detail } from "@/api/activityConfiguration";
import { getMenuTree } from "@/api/activityMenu";
import FileUpload from "@/components/FileUpload";

export default {
  components: {
    FileUpload,
  },
  props: ["activityType"],
  data() {
    return {
      form: {
        id: null,
        title: "",
        menuId: null,
        menuName: "",
        sort: 0,
        wapImgUrl: "",
        pcImgUrl: "",
        contentIntroduce: "",
        fileUrl: "",
      },
      baseUrl: process.env.VUE_APP_BASE_API,
      menuTree: [], // 存储菜单树数据
    };
  },
  mounted() {
    // 初始化时获取菜单树
    this.getMenuTreeData();
  },
  methods: {
    // 获取菜单树数据
    getMenuTreeData() {
      getMenuTree().then((res) => {
        if (res.code === 200 && res.data) {
          this.menuTree = res.data || [];
        }
      }).catch((error) => {
        console.error("获取菜单树失败:", error);
      });
    },
    // 根据菜单ID查找菜单名称
    findMenuNameById(menuId, tree = null) {
      if (!menuId) return '';
      const searchTree = tree || this.menuTree;
      if (!Array.isArray(searchTree) || searchTree.length === 0) {
        return '';
      }
      
      // 统一转换为字符串进行比较
      const targetId = String(menuId);
      
      for (const node of searchTree) {
        // 比较时统一转换为字符串
        if (String(node.id) === targetId) {
          return node.menuName || '';
        }
        // 递归查找子节点，优先使用 child 字段（getMenuTree 返回的是 child）
        const children = node.child || node.children;
        if (children && Array.isArray(children) && children.length > 0) {
          const found = this.findMenuNameById(menuId, children);
          if (found) {
            return found;
          }
        }
      }
      return '';
    },
    onDetail(id) {
      this.form.id = id;
      detail(id).then((res) => {
        if (res.code === 200 && res.data) {
          const menuId = res.data.menuId || null;
          
          // 如果菜单树已加载，直接查找；否则先加载菜单树再查找
          if (this.menuTree && this.menuTree.length > 0) {
            this.setFormData(res.data, menuId);
          } else {
            // 如果菜单树还没加载，先加载菜单树
            getMenuTree().then((menuRes) => {
              if (menuRes.code === 200 && menuRes.data) {
                this.menuTree = menuRes.data || [];
                this.setFormData(res.data, menuId);
              } else {
                this.setFormData(res.data, menuId);
              }
            }).catch(() => {
              this.setFormData(res.data, menuId);
            });
          }
        }
      }).catch((error) => {
        console.error("获取详情失败:", error);
        this.$message.error("获取详情失败，请重试");
      });
    },
    // 设置表单数据
    setFormData(data, menuId) {
      // 根据 menuId 查找菜单名称
      const menuName = menuId ? this.findMenuNameById(menuId) : '';
      
      this.form = {
        id: data.id || null,
        title: data.title || "",
        menuId: menuId ? String(menuId) : null,
        menuName: menuName || data.menuName || "",
        sort: data.sort || 0,
        wapImgUrl: data.wapImgUrl || "",
        pcImgUrl: data.pcImgUrl || "",
        contentIntroduce: data.contentIntroduce || "",
        fileUrl: data.fileUrl || "",
      };
    },
    onCancel() {
      this.$emit("cancel");
    },
  },
};
</script>

<style scoped>
.detail-file-upload ::v-deep .upload-file-uploader {
  display: none !important;
}
.detail-file-upload ::v-deep .ele-upload-list__item-content-action {
  display: none !important;
}
.detail-file-upload ::v-deep .el-upload__tip {
  display: none !important;
}
</style>
